<template>
  <div>
    <div class="container">
      <TableCustom
        :columns="columns"
        :tableData="menuData"
        row-key="index"
        :has-pagination="false"
        :viewFunc="handleView"
        :delFunc="handleDelete"
        :editFunc="handleEdit"
      >
        <template #toolbarBtn>
          <el-button type="warning" :icon="CirclePlusFilled" @click="visible = true">
            新增
          </el-button>
        </template>
        <template #icon="{ rows }">
          <el-icon>
            <component :is="rows.icon"></component>
          </el-icon>
        </template>
      </TableCustom>
    </div>
    <el-dialog
      :title="isEdit ? '编辑' : '新增'"
      v-model="visible"
      width="700px"
      destroy-on-close
      :close-on-click-modal="false"
      @close="closeDialog"
    >
      <TableEdit :form-data="rowData" :options="options" :edit="isEdit" :update="updateData">
        <template #parent>
          <el-cascader
            v-model="rowData.pid"
            :options="cascaderOptions"
            :props="{ checkStrictly: true }"
            clearable
          />
        </template>
      </TableEdit>
    </el-dialog>
    <!-- 移除了不存在的TableDetail组件相关代码 -->
  </div>
</template>

<script setup lang="ts" name="system-menu">
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import type { Menus } from '@/types/menu';
import TableCustom from '@/components/table-custom.vue';
// 移除了不存在的TableDetail导入
import type { FormOption } from '@/types/form-option'; // 使用type导入
import { menuData } from '@/components/menu';

// 表格相关
let columns = ref([
  { prop: 'title', label: '菜单名称', align: 'left' },
  { prop: 'icon', label: '图标' },
  { prop: 'index', label: '路由路径' },
  { prop: 'permiss', label: '权限标识' },
  { prop: 'operator', label: '操作', width: 250 },
]);

const getOptions = (data: Menus[]) => { // 明确参数类型
  return data.map((item: Menus) => { // 明确参数类型
    const a: any = {
      label: item.title,
      value: item.id,
    };
    if (item.children) {
      a.children = getOptions(item.children);
    }
    return a;
  });
};
const cascaderOptions = ref(getOptions(menuData));

// 新增/编辑弹窗相关
let options = ref<FormOption>({
  labelWidth: '100px',
  span: 12,
  list: [
    { type: 'input', label: '菜单名称', prop: 'title', required: true },
    { type: 'input', label: '路由路径', prop: 'index', required: true },
    { type: 'input', label: '图标', prop: 'icon' },
    { type: 'input', label: '权限标识', prop: 'permiss' },
    { type: 'parent', label: '父菜单', prop: 'parent' },
  ],
});
const visible = ref(false);
const isEdit = ref(false);
const rowData = ref<Partial<Menus>>({}); // 使用Partial类型更准确
const handleEdit = (row: Menus) => {
  rowData.value = { ...row };
  isEdit.value = true;
  visible.value = true;
};
const updateData = () => {
  closeDialog();
};

const closeDialog = () => {
  visible.value = false;
  isEdit.value = false;
};

// 查看详情弹窗相关（移除TableDetail相关代码）
const visible1 = ref(false);
const viewData = ref({
  row: {} as Menus, // 明确类型
  list: [] as Array<{prop: string, label: string}>, // 明确类型
});
const handleView = (row: Menus) => {
  viewData.value.row = { ...row };
  viewData.value.list = [
    {
      prop: 'id',
      label: '菜单ID',
    },
    {
      prop: 'pid',
      label: '父菜单ID',
    },
    {
      prop: 'title',
      label: '菜单名称',
    },
    {
      prop: 'index',
      label: '路由路径',
    },
    {
      prop: 'permiss',
      label: '权限标识',
    },
    {
      prop: 'icon',
      label: '图标',
    },
  ];
  visible1.value = true;
};

// 删除相关
const handleDelete = (row: Menus) => {
  ElMessage.success('删除成功');
};

// 定义图标组件，因为它们已经在main.ts中全局注册了
declare const CirclePlusFilled: any;
</script>

<style scoped></style>